{seo.title}

/* eslint-disable max-statements */ import type { ParsedUrlQuery } from 'querystring'; import type { GetStaticPaths, GetStaticProps } from 'next'; import dynamic from 'next/dynamic'; import Head from 'next/head'; import NextImage from 'next/image'; import { useRouter } from 'next/router'; import { useIntl } from 'react-intl'; import { getLayout, Heading, LinksWidget, PostsList, Page, PageHeader, PageSidebar, PageBody, LoadingPage, Spinner, } from '../../components'; import { convertWPTopicPreviewToPageLink, fetchAllTopicsSlugs, fetchTopic, fetchTopicsCount, fetchTopicsList, } from '../../services/graphql'; import styles from '../../styles/pages/blog.module.scss'; import type { GraphQLConnection, NextPageWithLayout, WPTopic, WPTopicPreview, } from '../../types'; import { CONFIG } from '../../utils/config'; import { getLinksItemData, getPostsWithUrl, getSchemaFrom, getWebPageGraph, slugify, trimHTMLTags, } from '../../utils/helpers'; import { loadTranslation, type Messages } from '../../utils/helpers/server'; import { useBreadcrumbs, useHeadingsTree, useTopic, useTopicsList, } from '../../utils/hooks'; const Toc = dynamic( async () => import('../../components').then((mod) => mod.TocWidget), { ssr: false, } ); export type TopicPageProps = { data: { currentTopic: WPTopic; otherTopics: GraphQLConnection; totalTopics: number; }; translation: Messages; }; const TopicPage: NextPageWithLayout = ({ data }) => { const intl = useIntl(); const { isFallback } = useRouter(); const { isLoading, topic } = useTopic( data.currentTopic.slug, data.currentTopic ); const { isLoading: areTopicsLoading, topics } = useTopicsList({ fallback: data.otherTopics, input: { first: data.totalTopics, where: { notIn: [topic.id] } }, }); const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumbs( topic.title ); const { ref, tree } = useHeadingsTree({ fromLevel: 2 }); if (isFallback || isLoading) return ; const { content, intro, meta, slug, title } = topic; const { articles, cover, dates, seo, relatedThematics, website: officialWebsite, } = meta; const jsonLd = getSchemaFrom([ getWebPageGraph({ breadcrumb: breadcrumbSchema, copyrightYear: new Date(dates.publication).getFullYear(), cover: cover?.src, dates, description: trimHTMLTags(intro), slug, title, }), ]); const messages = { widgets: { loadingTopicsList: intl.formatMessage({ defaultMessage: 'Topics are loading...', description: 'TopicPage: loading topics message', id: 'uUIgCr', }), thematicsListTitle: intl.formatMessage({ defaultMessage: 'Related thematics', description: 'TopicPage: related thematics list widget title', id: '/sRqPT', }), tocTitle: intl.formatMessage({ defaultMessage: 'Table of Contents', description: 'PageLayout: table of contents title', id: 'eys2uX', }), topicsListTitle: intl.formatMessage({ defaultMessage: 'Other topics', description: 'TopicPage: other topics list widget title', id: 'JpC3JH', }), }, browsePostsTitle: intl.formatMessage( { defaultMessage: 'Browse posts in {topicName} topic', description: 'TopicPage: posts list heading', id: 'd+DOFQ', }, { topicName: title } ), }; const pageUrl = `${CONFIG.url}${slug}`; const browsePostHeadingId = slugify(messages.browsePostsTitle); return ( {seo.title} {/*eslint-disable-next-line react/jsx-no-literals -- Name allowed */} {/*eslint-disable-next-line react/jsx-no-literals -- Content allowed */}